<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>		
	</head>
	<body>
		
		<form id="form">
		   用户名：<input name="username" type="text" placeholder="请输入账户名称" />
		   <br>密码：<input name="password" type="password" placeholder="请输入密码" />
		   <br>确认密码：<input type="password" name="confirmpass" placeholder="请再次输入密码" />
		   <br>邮箱：<input name="email"type="text" placeholder="请输入邮箱"/>
		   <br>联系方式：<input name="telephone" type="text" placeholder="请输入手机号"/>
		   <br>地址：<input name="address" type="text" placeholder="请输入地址"/>
		   <br><input type="submit" value="提交"/>		  
		</form>
		
		<script type="text/javascript">
		    $(function() {
				
				// 写验证规则
				let rules = {	
					username : {required : true},
					telephone : {required : true,minlength : 11},
					password : {required : true,minlength : 6},
					confirmpass : {required : true,minlength : 6,equalTo : "[name='password']"},
					email: {required: true,email: true}
				}
				
				// 写验证错误提示信息
				let messages = {
					username : {required : "请输入用户名"},
					password : {required : "请输入密码",minlength : "密码长度不能小于 6 个字母"},
					confirmpass : {
						required : "请输入密码",
						minlength : "密码长度不能小于 6 个字母",
						equalTo : "两次密码输入不一致"
					},
					telephone : {
						required : "请输入手机号码",
						minlength : "手机号码长度不能小于 11 ",
						isMoblie:"请正确填写您的手机号码"
					},
					email: "请输入正确的邮箱地址",
					address : {required : "请输入地址"},
				}
		        				
				
				// 表单验证提交
				$("#form").validate({		        			            
		        	rules,
					messages,
					submitHandler
					// onsubmit:function(ele,event){},// 是否在提交时验证
					// onfocusout:function(ele,event){},// 是否在获取焦点时验证
					// onkeyup :function(ele,event){},// 是否在敲击键盘时验证
		        })
								
		    })
			
			// 写异步提交函数	
			async function submitHandler(){
				event.preventDefault()
				let res = await $.post("https://www.baidu.com",$('#form').serialize())
				console.log('321231111111')
			}
		</script>
	</body>
</html>
